<template>
<div class="wrapper activities"> 
   <div class="activity-card-list"> 
    <div class="top-title"> 
     <h4 class="latest">最新活动</h4>      
     <div class="clearfix"></div> 
    </div> 
    <div class="activity-list" v-infinite-scroll="loadMore"> 
     <ul class="activity"> 
      <li class="activity-item" v-for="(item,index) in items" :key="index"> 
       <div class="activity-inner"> 
        <a href="http://"></a>                                  
        <div class="img">
         <a :href="`/gathering/item/${item.id}`">
            <img :src="`${item.image}`" alt="" />
        </a>
        </div> 
        <div class="text"> 
         <p class="title">{{item.name}}</p> 
         <div class="fl goin"> 
          <p>时间：{{item.starttime}}</p> 
          <p>城市：{{item.city}}</p> 
         </div> 
         <div class="fr btn"> 
          <span class="sui-btn btn-bao">立即报名</span> 
         </div> 
         <div class="clearfix"></div> 
        </div> 
       </div> </li>
     </ul> 
    </div> 
   </div> 
  </div> 
</template>

<script>
import gatheringApi from "~/api/gathering"
import "~/assets/css/page-sj-activity-index.css"
export default {
    //模拟服务端执行
    asyncData() {
        // return axios.get('http://192.168.74.131:7300/mock/5b51a3e4f38a30139f11cd1c/gathering/gathering').then(res => {
        //     //console.log(res)
        //     let list = res.data.data
        //     return {
        //         items:list
        //     }
        // })
       return gatheringApi.searchPage({},1,10).then(res=> {
            let list = res.data.data.rows
            return {
                items:list
            }
        })
    },

    data () {
        return {
            page:1,
            size:10
        }
    },
    created () {
        
    },
    methods: {
        loadMore() {
            gatheringApi.searchPage({},++this.page,this.size).then(res=> {
                let list = res.data.data.rows;
                //this.items = list
                this.items = this.items.concat(list)
            })
        }
    }
}
</script>

<style>

</style>
